import React from 'react';
import { Modal, Button, Empty } from 'antd';
import cass from 'classnames';
import s from './index.module.less';
import SearchInput from '../SearchInput';
import Avatar from '../Avatar';


class MemberSelectModal extends React.Component {

    static defaultProps = {
        dataSource: [],
    }

    constructor(props) {
        super(props);
        this.state = {
            dataSource: props.dataSource,
            selectedItems: [],
        }
    }

    componentWillReceiveProps(nextProps) {
        const { dataSource, visible } = nextProps;
        if (!this.props.visible && visible) {
            this.setState({ dataSource });
        }
    }

    getSelState = () => {
        return this.state;
    }

    setSelItems = (item) => {
        const { dataSource, selectedItems } = this.state;
        const newDataSource = [...dataSource, item];
        const newSelectedItems = [...selectedItems, item];
        this.setState({
            dataSource: newDataSource,
            selectedItems: newSelectedItems
        });
    }

    onSearch = (searchkey) => {
        this.props.onSearch({ searchkey });
    }

    onSelect = (id) => {
        const { dataSource } = this.state;
        const { mainKey } = this.props;
        const selectedItems = [];
        const newList = dataSource.map(v => {
            const newV = v[mainKey] === id ? { ...v, selected: !v.selected } : v;
            if (newV.selected) selectedItems.push(v);
            return newV;
        })
        this.setState({ dataSource: newList, selectedItems });
    }

    onCancel = () => {
        const { onCancel, onSearch } = this.props;
        onSearch && this.onSearch('');
        this.setState({
            dataSource: [], selectedItems: [],
        }, onCancel);
    }

    onSure = () => {
        const { selectedItems } = this.state;
        const { onOk, mainKey } = this.props;

        const targets = []; // 选中到右边的选项
        const targetsIds = [];

        selectedItems.forEach(v => {
            targets.push({ ...v, selected: false });
            targetsIds.push(v[mainKey]);

        });

        onOk({ targets, targetsIds }, () => {
            this.onCancel();
        })
    }

    render() {
        const { title, visible, isAdd, showAvatar, mainKey, showKey, onSearch, loading, extraButton } = this.props;
        const { dataSource, selectedItems } = this.state;
        return (
            <Modal
                wrapClassName={s.wrapModal}
                visible={visible}
                closable={false}
            >
                <div className={s.content}>
                    <div className={s.left}>
                        {onSearch ? (
                            <div className={s.search}>
                                <SearchInput
                                    key={!visible ? Math.random() : 'search'}
                                    placeholder="搜索"
                                    onPressEnter={(v) => this.onSearch(v)}
                                    onClear={() => this.onSearch('')}
                                />
                            </div>
                        ) : (
                                <div className={s.title}>
                                    请选择{title}
                                    {extraButton && <div className={s.extra}>{extraButton}</div>}
                                </div>
                            )}
                        <div className={s.list}>
                            {dataSource.length ? dataSource.map(v => (
                                <div key={v[mainKey]} className={cass(s.item, 'hovergray')} onClick={() => this.onSelect(v[mainKey])}>
                                    {showAvatar ? <Avatar username={v[showKey]} headimage={v.headimage} /> : null}
                                    <span className={s.text}>{v[showKey]}</span>
                                    <div className={s.logo}>
                                        {v.selected ? <span className="mdi mdi-checkbox-marked-circle" /> : <span className="mdi mdi-checkbox-blank-circle-outline" />}
                                    </div>
                                </div>
                            )) : <Empty description={`暂无${title}`} style={{ margin: '40px auto' }} />}
                        </div>
                    </div>
                    <div className={s.right}>
                        <div className={s.top}>
                            已经选择{title}
                        </div>
                        <div className={s.select}>
                            {selectedItems.length ? selectedItems.map(v => (
                                <div key={v[mainKey]} className={cass(s.item, 'hovergray')}>
                                    {showAvatar ? <Avatar username={v[showKey]} headimage={v.headimage} /> : null}
                                    <span className={cass(s.text, { mainColor: typeof v.stageid === 'string' && v[mainKey].length === 16 })}>{v[showKey]}</span>
                                    <div className={s.logo}>
                                        <span className="mdi mdi-close-circle" onClick={() => this.onSelect(v[mainKey])} />
                                    </div>
                                </div>
                            )) : <Empty description={`请选择要${isAdd ? '添加' : '删除'}的${title}`} style={{ margin: '40px auto' }} />}
                        </div>
                        <div className={s.footer}>
                            <Button onClick={this.onCancel}>取消</Button>
                            <Button type="primary" disabled={!selectedItems.length} onClick={this.onSure} loading={loading}>确定</Button>
                        </div>
                    </div>
                </div>
            </Modal>
        );
    }
}

export default MemberSelectModal